import Base from "../base.js";
import movieService from "../../service/movieService.js";

export default class extends Base {

  constructor(props) {
    super(props);
    this.movie = {}
  }

  render() {
    const template = `
          <table id="table" lay-filter="table"></table>
    `;
    this.$el.html(template);
    this.rerender();

  }
  rerender() {
    this.table.render({
      elem: '#table',
      height: 500,
      data: this.movie,
      page: true, //开启分页
      cols: [
        [ //表头
          {
            field: '_id',
            title: '编号',
            width: 240,
            sort: true,
            fixed: 'left'
          }, {
            field: 'cname',
            title: '电影名',
            width: 160,
            align: "center",

          }, {
            field: 'ename',
            title: '英文名',
            width: 160,
            sort: true,
            align: "center",

          }, {
            field: 'type',
            title: '类型',
            width: 80,
            align: "center",
          }, {
            field: `area`,
            title: '首映地址',
            align: "center",
            width: 80,
          },
          {
            field: `status`,
            title: '电影状态',
            align: "center",
            width: 80,
            templet: (data) => data.status == "0" ? "热映" : (data.status == "1" ? "经典" : "即将")
          },
          {
            field: `upDate`,
            title: '上映时间',
            align: "center",
            width: 100,
          },
          {
            field: `score`,
            title: '评分',
            align: "center",
            width: 80,
          },
          {
            field: `number`,
            title: '想看',
            align: "center",
            width: 80,
          },
          {
            field: `count`,
            title: '票房',
            align: "center",
            width: 80,
          },
          {
            field: `director`,
            title: '导演',
            width: 80,
          },
          {
            field: `actor`,
            title: '演员',
            width: 80,
          },
          {
            field: `intro`,
            title: '剧情简介',
            width: 256,
          },
          {
            field: 'do',
            title: '操作',
            width: 200,
            align: "center",
            toolbar: `<div> 
                        <a class="layui-btn layui-btn-xs" lay-event="update">更新</a>
                        <a class="layui-btn layui-btn-xs" lay-event="delete">删除</a>
                        <a class="layui-btn layui-btn-xs" lay-event="imgs">图片管理</a>
                      </div>`
          },
        ]
      ]
    });
  }
  mounted() {
    this.getMoviesData();
  }

  handle() {
    const that = this;

    this.table.on('tool(table)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
        let index;
        if (layEvent === 'update') { //更新
            //do somehing
            movieService.setMovie(data);
            location.hash = `#/info/updateMovie`;
        } 
        else if (layEvent === 'delete') { //删除
           layer.confirm('真的删除行么', function(index){
            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
            layer.close(index);
            //向服务端发送删除指令
            that.delete(data);
          });
        } else if (layEvent === 'imgs') {
            movieService.setMovie(data);
            location.hash = "#/info/movieImg";
        }
    });
}

  async delete(data) {
    const result = await movieService.delete(data);
    this.getMoviesData();
  }

  async getMoviesData() {
    this.movie = await movieService.get();
    this.rerender();
  }
}